<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构555 -->
      <el-card class="tree-card">
        <!-- 放置结构内容 :is-root="true"的时候不传入编辑和删除下拉菜单 -->
        <tree-tools
          :tree-node="company"
          :is-root="true"
          @addDepts="addDepts"
        ></tree-tools>
        <!-- 在头部下面放一个树形控件 :default-expand-all="true"所有的节点展开-->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 使用插槽 插入内容 -->
          <!-- 传入内容 插槽内容 会循环多少次 有多少节点就循环多少次 -->
          <!-- 作用域插槽 slot-scope="{data}"接受传递给插槽的数据 data 每个节点的数据对象 -->
          <!-- 使用组件 通过插槽的形式结构data 把data传递给组件 -->
          <!-- @delDepts="getDepartments"子组件触发父组件自定义事件 只要触发了这个事件就会重新获取数据 -->
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          ></tree-tools>
        </el-tree>
        <!-- 弹出层组件 -->
        <!-- :tree-node="node" 把node 传递给子组件 -->
        <!--  .sync-->
        <add-dept
          ref="addDept"
          :show-dialog.sync="showDialog"
          :tree-node="node"
          @addDepts="getDepartments"
        ></add-dept>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入添加弹出层
import AddDept from "./components/add-dept";
// 引入获取组织架构的方法 删除 添加  根据ID查询部门详情getDeparDetail
import { getDepartments, addDepartments ,getDeparDetail} from "@/api/departments";
// 引入tree-tools组件
import TreeTools from "./components/tree-tools";
// 引入列表数据转换为树形数据的方法
import { tranListToTreeData } from "@/utils/index";
export default {
  name: "departments",
  components: {
    // 注册组件
    TreeTools,
    AddDept,
  },

  data() {
    return {
      company: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      departs: [],
      showDialog: false, //默认弹出层为false 不显示
      node: null, //记录当前点击的node节点
    };
  },
  created() {
    // 在页面一加载的时候调用这个方法
    this.getDepartments();
  },
  methods: {
    // 获取组织架构信息
    async getDepartments() {
      //  调用组织架构的方法
      const result = await getDepartments();
      this.company = { name: result.companyName, manager: "负责人", id: "" };
      // 调用方法 转换为树形结构
      this.departs = tranListToTreeData(result.depts, ""); //把获取到的数据 转换为树形结构
      // console.log(result);
    },
    // 监听tree-tools中触发的点击 添加子部门 的事件
    // node 是我们点击的部门
    addDepts(node) {
      this.showDialog = true; // 显示弹层
      this.node = node;
    },
    //点击子组件的编辑 触发的父组件的事件
    editDepts(node) {
      this.showDialog = true; // 显示弹层
      this.node = node; //赋值操作的节点
      // console.log(this.$refs.addDept);  打印当前的实例
      // 应该在这里调用 获取部门详情的方法
      this.$refs.addDept.getDeparDetail(node.id)
    },
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
